<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.19/skins/default/aliplayer-min.css" />
  <script charset="utf-8" type="text/javascript"
    src="https://g.alicdn.com/de/prismplayer/2.9.19/aliplayer-min.js"></script>
  <script charset="utf-8" type="text/javascript"
    src="https://g.alicdn.com/de/prismplayer/2.9.19/aliplayer-h5-min.js"></script>

  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id="J_prismPlayer"></div>
  <div id='app'>
    <h1>直播详情</h1>

    <div class="mod-config">
      <el-table :data="list" style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50">
        </el-table-column>
        <el-table-column prop="goodsId" header-align="center" align="center" label="商品ID">
        </el-table-column>
        <el-table-column prop="stockCount" header-align="center" align="center" label="库存">
        </el-table-column>
        <el-table-column prop="price" header-align="center" align="center" label="活动价">
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="数量">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.num" controls-position="right" :min="1" :max="scope.row.stockCount">
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="goShop(scope.row)">购买</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <script>
      var player = new Aliplayer({
        id: 'J_prismPlayer',
        source: 'http://pull.java50k.com/daybreak/wlj.flv?auth_key=1647519402-0-0-933459ec4364133895249cbe44404db2',
        isLive: true
      }, function (player) {
        console.log(player);
      }
      );

      new Vue({
        el: '#app',
        data () {
          return {
            baseUrl: 'http://localhost:8888/api',
            token: null,
            list: []
          }
        },
        watch: {

        },
        created () {
          this.token = localStorage.getItem("token")
          if (this.token == null) {
            alert("无权访问")
            location = "./login.html"
          }
          console.log(this.token);
          this.getDesc();
        },
        //方法集合
        methods: {
          goShop (data) {
            console.log(data);
            axios.post(`${this.baseUrl}/live/orderlive/save`, {
              "goodsId": data.goodsId,
              "activityId": data.liveId,
              "goodsCount": data.num
            }, {
              headers: {
                token: this.token
              }
            }).then(({ data }) => {
              alert(data.msg)
            })
          },
          getDesc () {
            let liveId = localStorage.getItem('liveId')
            axios.get(`${this.baseUrl}/live/livegoods/list?liveId=${liveId}`).then(({ data }) => {
              this.list = data.page.list
            })
          }
        },
      })
    </script>
</body>

</html>